<!--
 * @Author: your name
 * @Date: 2021-02-21 13:06:55
 * @LastEditTime: 2021-02-25 15:14:50
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \myproject\src\views\Search\SearchResult.vue
-->

<template>
  <div class="serach-result">
    <van-nav-bar
  :title="`${keyword}的结果为`"
  left-arrow
   fixed
    @click-left="$router.back()"
/>
<!-- 文章列表 -->
<div class="list-content">
  <van-list
    class="article-list"
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
   <van-cell v-for="item in list" :key="item.art_id.toString()" :title="item.title" @click="godetail(item.art_id.toString())" />
</van-list>
</div>
  </div>
</template>

<script>
import { getSearchResult } from '@/api/search.js'
export default {
  name: 'SearchResult',
  data () {
    return {
      loading: false,
      finished: false,
      list: [],
      keyword: this.$route.query.q,
      page: 1
    }
  },
  methods: {
    godetail (id) {
      this.$router.push({
        path: '/articleDetail',
        query: {
          id
        }
      })
    },
    onLoad () {
      getSearchResult(this.keyword, this.page).then(res => {
        // console.log(res)
        const newArr = res.data.data.results
        this.list.push(...newArr)
        if (newArr.length === 0) {
          this.finished = true
        }
        this.page++
        this.loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar .van-icon{
color: #fff;
}
.serach-result {
  height: 100%;
  overflow: auto;
   .article-list {
    margin-top: 4px;
  }
  }
    // 这里有一个巨坑,一定要在布局上满足vant对于是否加载满一屏的要求
  // 否则会一直请求直到没有数据
  .list-content {
    position: fixed;
    top: 44px;
    bottom: 0;
    width: 100%;
    // 必须要加,否则无法滑动
    overflow-y: auto;
  }
</style>
